<template>
	<view class="card_pop">
		<titlePop title="优惠券" @close="closeDiscountPop"></titlePop>
		<!-- <view class="discount_box"> -->
		<scroll-view class="discount_box" :scroll-y="true">
			<view class="discount_list" v-for='(i,j) in ticketList' :key='i.id' @click="discountCkeced(i,j)">
				<image v-if="i.active" :src="IMGLink+'/my/discounted.png'" mode="" class="discount_bg"></image>
				<image v-else :src="IMGLink+'/my/discount.png'" mode="" class="discount_bg">
				</image>
				<view class="discount_con">
					<view class="discount_left">
						<view class="first">
							¥ {{i.offset_value}}
						</view>
						<view>
							满减券
						</view>
					</view>
					<view class="discount_right">
						<view class="discount_title">
							{{i.title}} (满{{i.action_value}}减{{i.offset_value}})
						</view>
						<view class="discount_date">
							{{i.begin_date}}至{{i.expiration_date}}
						</view>
						<view class="discount_area">
							{{i.scope_title}}<text v-if="i.appoint_title">({{i.appoint_title}})</text>
						</view>

					</view>
				</view>
				<image :src="IMGLink+'/my/discountchecked.png'" v-if="i.active" mode="" class="discount_check">
				</image>
				<image :src="IMGLink+'/my/discountnocheck.png'" v-else mode="" class="discount_check"></image>
			</view>
			<view class="no_data" v-if='discountList.length == 0'>
				暂无优惠券
			</view>
		</scroll-view>
		<!-- </view> -->
	</view>
</template>

<script>
	import titlePop from './titlepop.vue';
	import {
		getUserCouponsList
	} from '@/api/shopping/shopping.js';
	export default {
		props: {
			discountList: {
				type: Array,
				value: []
			},
			// 商品价格
			payprice: {
				type: String,
				value: ""
			},
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				couponFlag: true,
				ticketList: [],
			}
		},
		watch: {
			coupon(news, old) {
				this.couponFlag = news;
			},
			discountList(val) {
				this.ticketList = val;
			}
		},
		mounted() {
			if(this.ticketList.length == 0){
				this.ticketList = this.discountList;
			}
		},
		components: {
			titlePop,
		},
		methods: {
			closeDiscountPop() {
				this.$emit('closeDiscountPop')
			},
			discountCkeced(i, j) {
				let total = 0;
				// 计算满减额度相加,是否<=商品总价
				this.ticketList.filter(item => item.active).map(p => {
					total = Number(total) + Number(p.action_value)
				});
				total += Number(i.action_value);
				if (total <= Number(this.payprice)) {
					this.ticketList[j].active = !this.ticketList[j].active;
				} else {
					if (this.ticketList[j].active) {
						this.ticketList[j].active = false;
					} else {
						uni.showToast({
							title: `支付金额未满${total}哦，暂不可用～`,
							duration: 2000,
							icon: "none"
						});
					}
				}
				let checkList = this.ticketList.filter(item => item.active);
				this.$emit('changecouponId', checkList);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card_pop {
		padding: 48rpx 30rpx;
		background: #fff;
		border-radius: 18px 18px 0px 0px;
	}

	.title {
		font-size: 36rpx;
		line-height: 50rpx;
		font-weight: 500;
	}

	.discount_box {
		height: 760rpx;
		width: 100%;
		margin-top: 64rpx;

		.discount_list {
			margin-bottom: 24rpx;
			width: 700rpx;
			height: 224rpx;
			position: relative;
		}

		.discount_bg {
			width: 98%;
			height: 224rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		.discount_con {
			position: absolute;
			left: 0;
			right: 0;
			width: 700rpx;
			height: 224rpx;
			z-index: 88;
			display: flex;

			.discount_left {
				text-align: center;
				width: 210rpx;
				color: #F54642;
				font-size: 24rpx;
				padding-top: 72rpx;
			}

			.first {
				font-size: 36rpx;
				margin-bottom: 4rpx;
			}

			.discount_right {
				padding: 32rpx;
				width: 400rpx;

				.discount_title {
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.discount_date {
					color: #6B6B6B;
					font-size: 24rpx;
					line-height: 28rpx;
					margin-bottom: 50rpx;

				}

				.discount_area {
					font-size: 24rpx;
					color: #6B6B6B;
					border-top: 1px solid #F0E3E4;
					line-height: 60rpx;
				}
			}
		}

		.discount_check {
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			right: 30rpx;
			top: 80rpx;
			margin-left: 10rpx;
		}

	}

	.no_data {
		text-align: center;
		padding-top: 112rpx;
		color: rgba(7, 7, 7, .23);
		font-size: 32rpx;
		line-height: 34rpx;
	}
</style>
